<template>
    <div class="app-container home">
        <t-tabs v-model="tabName" :tabs="tabs" @tab-click="tabsChange">
            <template #tab1>
                <department />
            </template>
            <template #tab2>
                <device />
            </template>
        </t-tabs>
    </div>
</template>

<script setup>
import department from './components/department'
import device from './components/device'
const tabName = ref("tab1");
const tabs = ref([
    {
        key: "tab1",
        title: "科室数据"
    },
    {
        key: "tab2",
        title: "设备数据"
    }
])
// tab 切换
const tabsChange = (val) => {
    console.log("tabsChange", val);
    tabName.value = val.props.name;
}


</script>

<style lang="scss" scoped>
.app-container {
    padding: 16px 16px;
    clear: both;

    &.home {
        overflow-x: hidden;
        height: 100%;
    }
}
</style>